<template>
  <div class="playlist-card">
    <el-image
      class="playlist-cover"
      :src="coverUrl"
      fit="cover"
      :preview-src-list="[coverUrl]"
    />
    <div class="playlist-name">{{ name }}</div>
  </div>
</template>

<script setup lang="ts">
interface Props {
  coverUrl: string;
  name: string;
}

const props = defineProps<Props>();
</script>

<style>
.playlist-card {
  width: 200px;
  height: 220px;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 20px;
  cursor: pointer;
  transition: transform 0.2s ease;
}

.playlist-card:hover {
  transform: scale(1.05);
}

.playlist-cover {
  width: 100%;
  height: 250px;
  overflow: hidden;
}

.playlist-name {
  font-size: 14px;
  font-weight: 500;
  color: white;
  text-align: center;
  width: 100%;
  padding: 0 10px;
  word-break: break-word;
}
</style>